<template>
  <view class="games-container">
    <!-- 页面头部 -->
    <view class="header">
      <text class="header-title">益智小游戏</text>
      <text class="header-subtitle">锻炼思维，寓教于乐</text>
    </view>

    <!-- 游戏列表 -->
    <view class="games-list">
      <!-- 成语接龙 -->
      <view class="game-card" @tap="startGame('idiom')">
        <view class="game-icon">🐉</view>
        <view class="game-info">
          <text class="game-title">成语接龙</text>
          <text class="game-desc">根据提示接出正确的成语</text>
        </view>
        <view class="game-arrow">></view>
      </view>

      <!-- 猜谜语 -->
      <view class="game-card" @tap="startGame('riddle')">
        <view class="game-icon">🤔</view>
        <view class="game-info">
          <text class="game-title">猜谜语</text>
          <text class="game-desc">根据谜面猜出正确答案</text>
        </view>
        <view class="game-arrow">></view>
      </view>

      <!-- 诗词填空 -->
      <view class="game-card" @tap="startGame('poetry')">
        <view class="game-icon">📜</view>
        <view class="game-info">
          <text class="game-title">诗词填空</text>
          <text class="game-desc">填入正确的诗词字句</text>
        </view>
        <view class="game-arrow">></view>
      </view>

      <!-- 数学计算 -->
      <view class="game-card" @tap="startGame('math')">
        <view class="game-icon">🧮</view>
        <view class="game-info">
          <text class="game-title">数学计算</text>
          <text class="game-desc">快速计算数学题目</text>
        </view>
        <view class="game-arrow">></view>
      </view>
    </view>

    <!-- 游戏弹窗 -->
    <view class="game-modal" v-if="showGameModal" @tap="closeGame">
      <view class="modal-content" @tap.stop="">
        <!-- 游戏头部 -->
        <view class="modal-header">
          <text class="modal-title">{{ currentGameTitle }}</text>
          <view class="game-controls">
            <text class="score">得分: {{ currentScore }}</text>
            <text class="close-btn" @tap="closeGame">×</text>
          </view>
        </view>

        <!-- 进度条 -->
        <view class="progress-container" v-if="!gameOver">
          <view class="progress-info">
            <text class="progress-text">第 {{ questionIndex + 1 }} / {{ totalQuestions }} 题</text>
            <text class="progress-percent">{{ Math.round(((questionIndex + 1) / totalQuestions) * 100) }}%</text>
          </view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: ((questionIndex + 1) / totalQuestions) * 100 + '%' }"></view>
          </view>
        </view>

        <!-- 游戏内容区域 -->
        <view class="game-content">
          <!-- 成语接龙游戏 -->
          <view v-if="currentGame === 'idiom'" class="idiom-game">
            <view class="question-area">
              <text class="question-title">请接出以"{{ currentQuestion.lastChar }}"开头的成语：</text>
              <text class="previous-idiom">上一个成语：{{ currentQuestion.previousIdiom }}</text>
            </view>
            <view class="options">
              <view 
                class="option-btn" 
                v-for="(option, index) in currentQuestion.options" 
                :key="index"
                @tap="selectAnswer(option, index)">
                {{ option }}
              </view>
            </view>
          </view>

          <!-- 猜谜语游戏 -->
          <view v-if="currentGame === 'riddle'" class="riddle-game">
            <view class="question-area">
              <text class="riddle-text">{{ currentQuestion.riddle }}</text>
              <text class="riddle-hint" v-if="currentQuestion.hint">提示：{{ currentQuestion.hint }}</text>
            </view>
            <view class="options">
              <view 
                class="option-btn" 
                v-for="(option, index) in currentQuestion.options" 
                :key="index"
                @tap="selectAnswer(option, index)">
                {{ option }}
              </view>
            </view>
          </view>

          <!-- 诗词填空游戏 -->
          <view v-if="currentGame === 'poetry'" class="poetry-game">
            <view class="question-area">
              <text class="poetry-text">{{ currentQuestion.poetry }}</text>
              <text class="poetry-author">—— {{ currentQuestion.author }}</text>
            </view>
            <view class="options">
              <view 
                class="option-btn" 
                v-for="(option, index) in currentQuestion.options" 
                :key="index"
                @tap="selectAnswer(option, index)">
                {{ option }}
              </view>
            </view>
          </view>

          <!-- 数学计算游戏 -->
          <view v-if="currentGame === 'math'" class="math-game">
            <view class="question-area">
              <text class="math-expression">{{ currentQuestion.expression }} = ?</text>
            </view>
            <view class="options">
              <view 
                class="option-btn" 
                v-for="(option, index) in currentQuestion.options" 
                :key="index"
                @tap="selectAnswer(option, index)">
                {{ option }}
              </view>
            </view>
          </view>
        </view>

        <!-- 结果提示 -->
        <view class="result-area" v-if="showResult">
          <text class="result-text" :class="{ correct: isCorrect, wrong: !isCorrect }">
            {{ isCorrect ? '回答正确！+10分' : '回答错误！正确答案是：' + currentQuestion.correctAnswer }}
          </text>
          <button class="next-btn" @tap="nextQuestion">
            {{ questionIndex >= totalQuestions - 1 ? '查看结果' : '下一题' }}
          </button>
        </view>

        <!-- 游戏结束 -->
        <view class="game-over" v-if="gameOver">
          <text class="final-score">游戏结束！</text>
          <text class="score-text">最终得分：{{ currentScore }}</text>
          <text class="performance">{{ getPerformanceText() }}</text>
          <view class="game-over-buttons">
            <button class="restart-btn" @tap="restartGame">再玩一次</button>
            <button class="back-btn" @tap="closeGame">返回</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showGameModal: false,
      currentGame: '',
      currentGameTitle: '',
      currentScore: 0,
      questionIndex: 0,
      totalQuestions: 10,
      currentQuestion: {},
      showResult: false,
      isCorrect: false,
      gameOver: false,
      


      // 游戏数据
      gameData: {
        // 成语接龙数据
        idioms: [
          { previousIdiom: '一心一意', lastChar: '意', options: ['意气风发', '意想不到', '意犹未尽', '意味深长'], correct: 0 },
          { previousIdiom: '龙飞凤舞', lastChar: '舞', options: ['舞文弄墨', '舞刀弄枪', '舞台表演', '舞蹈家'], correct: 0 },
          { previousIdiom: '花好月圆', lastChar: '圆', options: ['圆满成功', '圆形物体', '圆桌会议', '圆润光滑'], correct: 0 },
          { previousIdiom: '风和日丽', lastChar: '丽', options: ['丽日当空', '美丽动人', '丽质天生', '壮丽山河'], correct: 0 },
          { previousIdiom: '春暖花开', lastChar: '开', options: ['开天辟地', '开门见山', '开花结果', '开心快乐'], correct: 0 },
          { previousIdiom: '山清水秀', lastChar: '秀', options: ['秀外慧中', '秀丽风景', '秀才遇兵', '秀色可餐'], correct: 0 },
          { previousIdiom: '鸟语花香', lastChar: '香', options: ['香飘十里', '香甜可口', '香火旺盛', '香车美女'], correct: 0 },
          { previousIdiom: '金玉满堂', lastChar: '堂', options: ['堂堂正正', '堂而皇之', '堂兄弟妹', '堂上燕雀'], correct: 0 },
          { previousIdiom: '天长地久', lastChar: '久', options: ['久负盛名', '久而久之', '久旱逢雨', '久别重逢'], correct: 0 },
          { previousIdiom: '心想事成', lastChar: '成', options: ['成竹在胸', '成千上万', '成家立业', '成人之美'], correct: 0 }
        ],

        // 谜语数据
        riddles: [
          { riddle: '有头无颈，有眼无眉，无脚能走，有翅难飞', hint: '生活用品', options: ['鱼', '蛇', '蚯蚓', '针'], correct: 0 },
          { riddle: '一物生来身穿三百多件衣，每天脱一件，年底剩张皮', hint: '时间相关', options: ['日历', '洋葱', '竹笋', '白菜'], correct: 0 },
          { riddle: '兄弟七八个，围着柱子坐，大家一分手，衣服就扯破', hint: '食物', options: ['大蒜', '橘子', '花生', '核桃'], correct: 0 },
          { riddle: '一个小姑娘，坐在水中央，身穿粉红袄，阵阵放清香', hint: '植物', options: ['荷花', '水仙', '睡莲', '菊花'], correct: 0 },
          { riddle: '白胖娃娃泥里卧，腰身细细心眼多', hint: '蔬菜', options: ['莲藕', '萝卜', '土豆', '山药'], correct: 0 },
          { riddle: '千条线，万条线，掉到水里看不见', hint: '天气现象', options: ['雨', '雪', '雾', '云'], correct: 0 },
          { riddle: '小小金坛子，装着金饺子，吃掉金饺子，吐出白珠子', hint: '水果', options: ['橘子', '柚子', '石榴', '荔枝'], correct: 0 },
          { riddle: '身穿绿衣裳，肚里水汪汪，生的子儿多，个个黑脸膛', hint: '水果', options: ['西瓜', '冬瓜', '南瓜', '黄瓜'], correct: 0 },
          { riddle: '不是点心不是糖，软软凉凉肚里藏，不能吃来不能喝，每天也要尝一尝', hint: '日用品', options: ['牙膏', '香皂', '洗发水', '护手霜'], correct: 0 },
          { riddle: '有面没有口，有脚没有手，虽有四只脚，自己不会走', hint: '家具', options: ['桌子', '椅子', '床', '柜子'], correct: 0 }
        ],

        // 诗词填空数据
        poetry: [
          { poetry: '床前明月光，疑是___霜', author: '李白', options: ['地上', '天上', '窗前', '屋顶'], correct: 0 },
          { poetry: '春眠不觉晓，处处闻___', author: '孟浩然', options: ['啼鸟', '花香', '风声', '雨声'], correct: 0 },
          { poetry: '锄禾日当午，汗滴___土', author: '李绅', options: ['禾下', '田中', '地上', '草间'], correct: 0 },
          { poetry: '举头望明月，低头思___', author: '李白', options: ['故乡', '亲人', '往事', '未来'], correct: 0 },
          { poetry: '野火烧不尽，春风___又生', author: '白居易', options: ['吹', '来', '起', '过'], correct: 0 },
          { poetry: '白日依山尽，黄河入___', author: '王之涣', options: ['海流', '大海', '江河', '东海'], correct: 0 },
          { poetry: '两个黄鹂鸣翠柳，一行白鹭上___', author: '杜甫', options: ['青天', '蓝天', '云霄', '高空'], correct: 0 },
          { poetry: '飞流直下三千尺，疑是银河落___', author: '李白', options: ['九天', '人间', '凡尘', '大地'], correct: 0 },
          { poetry: '桃花潭水深千尺，不及汪伦送我___', author: '李白', options: ['情', '意', '心', '爱'], correct: 0 },
          { poetry: '独在异乡为异客，每逢佳节倍思___', author: '王维', options: ['亲', '家', '乡', '友'], correct: 0 }
        ],

        // 数学计算数据
        math: [
          { expression: '15 + 27', options: ['42', '41', '43', '40'], correct: 0 },
          { expression: '8 × 9', options: ['72', '71', '73', '70'], correct: 0 },
          { expression: '100 - 37', options: ['63', '62', '64', '61'], correct: 0 },
          { expression: '144 ÷ 12', options: ['12', '11', '13', '10'], correct: 0 },
          { expression: '25 + 18 - 7', options: ['36', '35', '37', '34'], correct: 0 },
          { expression: '6 × 7 + 8', options: ['50', '49', '51', '48'], correct: 0 },
          { expression: '81 ÷ 9 - 3', options: ['6', '5', '7', '4'], correct: 0 },
          { expression: '45 + 29', options: ['74', '73', '75', '72'], correct: 0 },
          { expression: '13 × 4', options: ['52', '51', '53', '50'], correct: 0 },
          { expression: '96 - 48 + 15', options: ['63', '62', '64', '61'], correct: 0 }
        ]
      }
    }
  },

  onLoad() {
    // 页面加载完成
  },

  methods: {
    // 开始游戏
    startGame(gameType) {
      this.currentGame = gameType
      this.currentScore = 0
      this.questionIndex = 0
      this.gameOver = false
      this.showResult = false
      
      const gameTitles = {
        idiom: '成语接龙',
        riddle: '猜谜语', 
        poetry: '诗词填空',
        math: '数学计算'
      }
      
      this.currentGameTitle = gameTitles[gameType]
      this.showGameModal = true
      
      this.loadQuestion()
    },

    // 加载题目
    loadQuestion() {
      const gameDataKey = this.currentGame === 'idiom' ? 'idioms' :
                         this.currentGame === 'riddle' ? 'riddles' :
                         this.currentGame === 'poetry' ? 'poetry' : 'math'

      const questions = this.gameData[gameDataKey]
      const randomIndex = Math.floor(Math.random() * questions.length)
      this.currentQuestion = { ...questions[randomIndex] }
      this.currentQuestion.correctAnswer = this.currentQuestion.options[this.currentQuestion.correct]

      // 打乱选项顺序
      this.shuffleOptions()
    },

    // 打乱选项顺序
    shuffleOptions() {
      const correctAnswer = this.currentQuestion.options[this.currentQuestion.correct]
      const options = [...this.currentQuestion.options]

      // Fisher-Yates 洗牌算法
      for (let i = options.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [options[i], options[j]] = [options[j], options[i]]
      }

      this.currentQuestion.options = options
      this.currentQuestion.correct = options.indexOf(correctAnswer)
    },

    // 选择答案
    selectAnswer(answer, index) {
      if (this.showResult) return

      this.isCorrect = index === this.currentQuestion.correct
      if (this.isCorrect) {
        this.currentScore += 10
        // 正确答案振动反馈
        uni.vibrateShort({
          type: 'light'
        })
      } else {
        // 错误答案振动反馈
        uni.vibrateShort({
          type: 'heavy'
        })
      }

      this.showResult = true
    },

    // 下一题
    nextQuestion() {
      this.questionIndex++
      this.showResult = false
      
      if (this.questionIndex >= this.totalQuestions) {
        this.endGame()
      } else {
        this.loadQuestion()
      }
    },

    // 结束游戏
    endGame() {
      this.gameOver = true
    },

    // 重新开始游戏
    restartGame() {
      this.currentScore = 0
      this.questionIndex = 0
      this.gameOver = false
      this.showResult = false
      this.loadQuestion()
    },

    // 关闭游戏
    closeGame() {
      this.showGameModal = false
      this.currentGame = ''
      this.gameOver = false
      this.showResult = false
    },

    // 获取表现评价
    getPerformanceText() {
      const percentage = (this.currentScore / (this.totalQuestions * 10)) * 100
      if (percentage >= 90) return '太棒了！你是天才！'
      if (percentage >= 70) return '很不错！继续加油！'
      if (percentage >= 50) return '还可以，多练习会更好！'
      return '加油！多练习一定会进步的！'
    },


  }
}
</script>

<style scoped>
.games-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

/* 页面头部 */
.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: -20rpx -20rpx 20rpx -20rpx;
  color: white;
}

.header-title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.header-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
}

/* 游戏列表 */
.games-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.game-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.game-card:active {
  transform: scale(0.98);
}

.game-icon {
  font-size: 60rpx;
  margin-right: 24rpx;
  width: 80rpx;
  text-align: center;
}

.game-info {
  flex: 1;
}

.game-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.game-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.game-arrow {
  font-size: 32rpx;
  color: #ccc;
  margin-left: 20rpx;
}

/* 游戏弹窗 */
.game-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  width: 90%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.game-controls {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.score {
  font-size: 26rpx;
}

.close-btn {
  font-size: 40rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* 进度条 */
.progress-container {
  padding: 20rpx 30rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
}

.progress-percent {
  font-size: 24rpx;
  color: #667eea;
  font-weight: bold;
}

.progress-bar {
  height: 8rpx;
  background: #e9ecef;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

/* 游戏内容 */
.game-content {
  padding: 40rpx 30rpx;
}

.question-area {
  margin-bottom: 40rpx;
  text-align: center;
}

.question-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
  line-height: 1.6;
}

.previous-idiom {
  font-size: 24rpx;
  color: #666;
  display: block;
  background: #f8f9fa;
  padding: 16rpx;
  border-radius: 8rpx;
}

.riddle-text {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
  line-height: 1.8;
  font-weight: 500;
}

.riddle-hint {
  font-size: 24rpx;
  color: #ff6b6b;
  display: block;
  background: #fff5f5;
  padding: 12rpx;
  border-radius: 8rpx;
}

.poetry-text {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
  line-height: 1.8;
  font-weight: 500;
}

.poetry-author {
  font-size: 24rpx;
  color: #666;
  display: block;
  font-style: italic;
}

.math-expression {
  font-size: 48rpx;
  color: #333;
  display: block;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

/* 选项按钮 */
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.option-btn {
  background: white;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 24rpx 16rpx;
  text-align: center;
  font-size: 26rpx;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.option-btn:active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* 结果区域 */
.result-area {
  margin-top: 30rpx;
  text-align: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.result-text {
  font-size: 28rpx;
  display: block;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.result-text.correct {
  color: #52c41a;
}

.result-text.wrong {
  color: #ff4d4f;
}

.next-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 40rpx;
  font-size: 26rpx;
  font-weight: bold;
}

/* 游戏结束 */
.game-over {
  text-align: center;
  padding: 40rpx 30rpx;
}

.final-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.score-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 16rpx;
}

.performance {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 40rpx;
}

.game-over-buttons {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.restart-btn,
.back-btn {
  flex: 1;
  max-width: 200rpx;
  height: 80rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: bold;
}

.restart-btn {
  background: #52c41a;
  color: white;
}

.back-btn {
  background: #f5f5f5;
  color: #666;
}
</style>
